<style type="text/css">
  .layui-color-red{color: red;}
  .authorize-changer-show{
    display: block;
  }
  .authorize-changer-hide{
    display: none;
  }
</style>
{php}
{var_dump($vo);}
{/php}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body">
        {if $userinfo['db1']['authorize'] == 1}
            <div class="layui-form-item">

              <label class="layui-form-label label-required">指定公司</label>
            <div class="layui-input-block">
                <!-- <input name="department" value='{$vo.department|default=""}' required placeholder="请输入公司名称" class="layui-input"> -->
                <select id="companylist"  class="layui-select" name="companyid" lay-filter="companyid">

                  <option value="">-- 选择公司 --</option>
  

                    {foreach  $data['companylist'] as $key=>$value}
                         {if $value.id == @$vo.companyid }
                    
                        <option selected value="{$value.id}">{$value.name}</option>
                        {else}
                        <option value="{$value.id}">{$value.name}</option>
                      
                        {/if}
                    {/foreach}
                </select>
            </div>
           

        </div>
 {/if}

        <div class="layui-form-item">
            <label class="layui-form-label label-required">员工姓名</label>
            <div class="layui-input-block">
                {if (@$vo.name)}
                    <input disabled="disabled" style="position: absolute;z-index:2;width: 80%;" autocomplete="off" name="nickname" value='{$vo.name|default=""}' required placeholder="请输入公司员工姓名" class="layui-input" id="searchname">
                {else}
                    <input style="position: absolute;z-index:2;width: 80%;" autocomplete="off" name="nickname" value='{$vo.nickname|default=""}' required placeholder="请输入公司员工姓名" class="layui-input" id="searchname">
                {/if}           
                 <select id="searchuserlist"  class="layui-input layui-unselect" name="userid" lay-filter="watch" lay-search>
                    {if (@$vo.name)}
                        <option value="{$vo.id}">{$vo.name}</option>
                    {else}
                         <option value="">-- 搜索员工姓名 --</option>
                    {/if}   
               


                </select>

            </div>
        </div>

<!--         <div class="layui-form-item">
            <label class="layui-form-label label-required">员工身份</label>
            <div class="layui-input-block">
                <input name="user_type" value='{$vo.user_type|default=""}' required placeholder="请输入公司员工身份" class="layui-input">
            </div>
        </div> -->
{if $userinfo['db1']['authorize']==1}

  <div class="layui-form-item authorize-changer authorize-changer-hide">
    <label class="layui-form-label">权限</label>
    <div class="layui-input-block">
      否<input type="checkbox" name="ch_role" lay-skin="switch">是
      <span class="layui-color-red">(是否同时移除当前用户权限)</span>
    </div>
  </div>

{/if}

		<div class="layui-form-item">

		    <label class="layui-form-label label-required">所属部门</label>
		    <div class="layui-input-block">
		       <!-- <input name="department" value='{$vo.department|default=""}' required placeholder="请输入所属部门" class="layui-input"> -->
			<select id="deptlist"  class="layui-select" name="departmentid" lay-filter="departmentid">
 <option value="">-- 全部部门 --</option>
<!--                 {if (@$vo.deptid)}
                 <option data-is_security="{$vo.roleid==6?1:0}" value="{$vo.deptid}">{$vo.dept_name}</option>
                {else}
                 <option value="">-- 全部部门 --</option>
                {/if}  
			 -->
				{foreach $deptlist as $key=>$val}

				{if @$vo.deptid == $val.id}
			        <option data-is_security="{$val.is_security}" selected value="{$val.id}">{$val.dept_name}</option>
			    {else}
			        <option data-is_security="{$val.is_security}" value="{$val.id}">{$val.dept_name}</option>
			      
				{/if}
				{/foreach}
			</select>
			</div>

		</div>
    <div class="layui-form-item">

        <label class="layui-form-label label-required">员工身份</label>
        <div class="layui-input-block">
           <!-- <input name="department" value='{$vo.department|default=""}' required placeholder="请输入所属部门" class="layui-input"> -->
      <select id="rolelist"  class="layui-select" name="roleid" lay-filter="roleid">
 <option value="">-- 职位身份 --</option>

        {foreach $rolelist as $key=>$val}

        {if @$vo.roleid == $val.id}
              <option selected value="{$val.id}">{$val.name}</option>
          {else}
            
              <option value="{$val.id}">{$val.name}</option>
         
            
        {/if}
        {/foreach}
      </select>
      </div>

    </div>
 <div class="layui-form-item">

            <label class="layui-form-label label-required">联系手机</label>

            <div class="layui-input-inline">
                {if (@$vo.mobile)}
                <input id="searchphone" style="position: absolute;z-index:2;width: 80%;" type="tel" maxlength="11" autocomplete="off" name="contact_phone" value='{$vo.mobile|default=""}' pattern="^1[3-9][0-9]{9}$" placeholder="请输入联系手机" class="layui-input">
                {else}
                <input id="searchphone" style="position: absolute;z-index:2;width: 80%;" type="tel" maxlength="11" autocomplete="off" name="contact_phone" value='{$vo.mobile|default=""}' pattern="^1[3-9][0-9]{9}$" placeholder="请输入联系手机" class="layui-input">
                {/if}
                 <select id="searchphonelist"  class="layui-input layui-unselect" name="phone" lay-filter="watchphone" lay-search>
                    {if (@$vo.mobile)}
                        <option value="{$vo.id}">{$vo.mobile}</option>
                    {else}
                         <option value="">-- 搜索员工手机号 --</option>
                    {/if}   
               
                </select>
            </div>
 </div>
 <div class="layui-form-item">
            <label class="layui-form-label">联系邮箱</label>
            <div class="layui-input-inline">
                {if (@$vo.email)}
                <input name="contact_mail" autocomplete="off" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" value='{$vo.email|default=""}' placeholder="请输入联系邮箱" class="layui-input">
                {else}
                <input name="contact_mail" autocomplete="off" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" value='{$vo.email|default=""}' placeholder="请输入联系邮箱" class="layui-input">
                {/if}

            </div>
 </div>
        <!-- </div> -->
<!--         <div class="layui-form-item">
            <label class="layui-form-label">打卡绑定</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入绑定手机" class="layui-textarea" name="mobile_macs">{$vo.mobile_macs|default=""}</textarea>
            </div>
        </div> -->
    <!-- </div> -->

    <div class="hr-line-dashed"></div>
        {if (@$vo.deptid)}
            <input type='hidden' value='{$vo.roleid==6?1:0}' name='is_security'>
        {else}
            <input type='hidden' value='' name='is_security'>
        {/if} 
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    {if @$vo.companyid}
      <input type='hidden' value='{$vo.companyid}' name='companyid'>
    {else}
      {if $userinfo['db1']['authorize'] != 1}
        <input type='hidden' value="{$userinfo.db2.companyid}" name='companyid'>
      {/if}

    {/if}
    {if @$vo.id}
    <input type='hidden' value='{$vo.id}' name='userid'>
    {else/}
    <input type='hidden' value='' name='userid'>
    {/if}
    


     {if $userinfo['db1']['authorize'] == 2}
        <input type='hidden' value='{$userinfo["db2"]["companyid"]}' name='companyid'>
     {/if}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>


</form>

    <script language="JavaScript">
    layui.use(['layer', 'jquery', 'form'], function () {
      var layer = layui.layer,
              $ = layui.jquery;
            form = layui.form;
        /**选择用户后搜索**/
      form.on('select(watch)', function(data){
        console.log(data)
            $.ajax({
              url:"{:url('company/user/getuserlist')}",
              data:{id:data.value},
              type:'post',
              async: false,
              dataType:'json',
              success:function(res) {
                var reres = JSON.parse(res)
                console.log(reres)
                if(reres.data.roleid==2){
                  $('.authorize-changer').css({'display':'block'})
                }else{
                  $('.authorize-changer').css({'display':'none'})
                  $('input[name="ch_role"]').val('off');
                }
                $('#searchname').val(reres.data.name)
                $("input[name='contact_phone']").val(reres.data.mobile)
                $("input[name='contact_mail']").val(reres.data.email)
                $("input[name='userid']").val(reres.data.id)
              }
          })
        });
        /**选择手机后搜索**/
      form.on('select(watchphone)', function(data){
        console.log(data)
            $.ajax({
              url:"{:url('company/user/getuserlist')}",
              data:{id:data.value},
              type:'post',
              async: false,
              dataType:'json',
              success:function(res) {
                var reres = JSON.parse(res)
                console.log(reres)
                try{
                  if(reres.data.roleid==2){
                    $('.authorize-changer').css({'display':'block'})
                  }else{
                    $('.authorize-changer').css({'display':'none'})
                    $('input[name="ch_role"]').val('off');
                  }
                }catch(error){
                    $('.authorize-changer').css({'display':'none'})
                    $('input[name="ch_role"]').val('off');
                }
                $('#searchname').val(reres.data?reres.data.name:'')
                $("input[name='contact_phone']").val(reres.data?reres.data.mobile:'')
                $("input[name='contact_mail']").val(reres.data?reres.data.email:'')
                $("input[name='userid']").val(reres.data?reres.data.id:'')
              }
          })
        });
        /**选择公司后搜搜部门**/
        form.on('select(companyid)', function(data){
        console.log(data)
            $('input[name="companyid"]').val(data.value)
            $('#deptlist').html('')
            form.render('select')
            $.ajax({
              url:"{:url('company/department/getdeptlist')}",
              data:{companyid:data.value},
              type:'post',
              async: false,
              dataType:'json',
              success:function(res) {
                // if(eval('{$userinfo["db1"]["authorize"]}')==1){
                //   $('.authorize-changer').css({'display':'block'})
                // }
                var reres = JSON.parse(res)
                var option = ''
                console.log(reres)
                for (var i = 0; i < reres.data.length; i++) {
                    option = option+"<option data-is_security="+reres.data[i].is_security+" value="+reres.data[i].id+">"+reres.data[i].dept_name+"</option>"
                }
                $('#deptlist').append(option)

              }
          }) 
        form.render('select')
      });

        /**选择部门后**/
        form.on('select(departmentid)', function(data){
            console.log(data)
            var is_security = $(data.elem).find("option:selected").attr("data-is_security")
            console.log(is_security)
            console.log(data.elem[data.elem.selectedIndex]); 
            if(is_security==1){
                $('input[name="is_security"]').val(1)   
            }else{
                $('input[name="is_security"]').val(0) 
            }
            console.log($('input[name="is_security"]').val());
      });
        
        // $('#searchuser').change(function(){
        //     console.log(2)
        // })
        
        $("#searchname").on("input",function(e){
            $("#searchuserlist").next().find("dl").css({ "display": "block" });
            console.log(e.delegateTarget.value);
            $('#searchuserlist').html('')
            form.render('select')
            if(e.delegateTarget.value==''){return;}
            $.ajax({
              url:"{:url('company/user/getuserlist')}",
              data:{name:e.delegateTarget.value},
              type:'post',
              async: false,
              dataType:'json',
              success:function(res) {
                var reres = JSON.parse(res)
                var option = ''
                for (var i = 0; i < reres.data.length; i++) {
                    option = option+"<option value="+reres.data[i].id+">"+reres.data[i].name+"</option>"
                }
                console.log(reres)
                $('#searchuserlist').append(option)
              }
          })
            form.render('select')
        });

          $("#searchphone").on("input",function(e){
            $("#searchphonelist").next().find("dl").css({ "display": "block" });
            console.log(e.delegateTarget.value);
            $('#searchphonelist').html('')
            form.render('select')
            if(e.delegateTarget.value==''){return;}
            $.ajax({
              url:"{:url('company/user/getuserlist')}",
              data:{'phone':e.delegateTarget.value,'type':'phone'},
              type:'post',
              async: false,
              dataType:'json',
              success:function(res) {
                console.log(res)
                var reres = JSON.parse(res)
                var option = ''
                for (var i = 0; i < reres.data.length; i++) {
                    option = option+"<option value="+reres.data[i].id+">"+reres.data[i].mobile+"</option>"
                }
                console.log(reres)
                $('#searchphonelist').append(option)
              }
          })
            form.render('select')
        });
    });

    </script>
<script>form.render();</script>

